<template>
  <div>
    <div id="store_container">
      <div class="store_container_main">
        <div class="store_container_main_title">
          <span>店铺管理</span>
          <el-button @click="clickedit" type="primary" size="mini"
            >保存</el-button
          >
        </div>

        <div class="store_container_main_body">
          <div>
            <span>店铺名称</span>
            <el-input v-model="shopdata.name" style="width: 280px"></el-input>
          </div>

          <div>
            <span>店铺公告</span>
            <el-input
              type="textarea"
              :rows="5"
              v-model="shopdata.bulletin"
              style="width: 300px"
            >
            </el-input>
          </div>

          <!-- 头像 -->
          <div>
            <span>店铺头像</span>
            <div>
              <el-upload
                class="avatar-uploader"
                action="http://127.0.0.1:5000/shop/upload"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
              >
                <img :src="shopdata.avatar" class="avatar" />
              </el-upload>
            </div>
          </div>

          <!-- 照片墙 -->
          <div class="storeimg">
            <span>店铺图片</span>
            <div>
              <el-upload
                action="http://127.0.0.1:5000/shop/upload"
                :file-list="fileList"
                list-type="picture-card"
                :on-success="picsSuccess"
                :on-remove="picsRemove"
              >
              </el-upload>
            </div>
          </div>

          <div>
            <span>配送费</span>
            <el-input
              v-model="shopdata.deliveryPrice"
              style="width: 280px"
            ></el-input>
          </div>
          <div>
            <span>配送时间</span>
            <el-input
              v-model="shopdata.deliveryTime"
              style="width: 280px"
            ></el-input>
          </div>
          <div>
            <span>配送描述</span>
            <el-input
              v-model="shopdata.description"
              style="width: 280px"
            ></el-input>
          </div>

          <div>
            <span>店铺评分</span>
            <el-input v-model="shopdata.score" style="width: 280px"></el-input>
          </div>
          <div>
            <span>销量</span>
            <el-input
              v-model="shopdata.sellCount"
              style="width: 280px"
            ></el-input>
          </div>

          <div>
            <span>添加活动</span>
            <div class="activetype">
              <div>
                <el-input style="width: 280px" v-model="activeName"></el-input>

                <el-button
                  @click="shopdata.supports.push(activeName)"
                  size="mini"
                  style="margin-left: 10px"
                >
                  添加活动</el-button
                >
              </div>
            </div>
          </div>

          <div>
            <span>活动</span>
            <el-checkbox-group v-model="activearr">
              <el-checkbox
                v-for="activename in shopdata.supports"
                :key="activename"
                :label="activename"
              />
            </el-checkbox-group>
          </div>

          <div class="dotime">
            <span>营业时间</span>
            <el-time-picker
              value-format="yyyy-MM-dd HH:mm:ss"
              is-range
              v-model="shopdata.date"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              placeholder="选择时间范围"
            >
            </el-time-picker>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { shopinfo, shopnameedit } from "@/apis/items";
export default {
  data() {
    return {
      shopdata: {}, //店铺数据
      /* avatar: "http://172.16.7.254:5000/upload/shop/1590473180839.webp"
      bulletin: "尊敬的客官，六一攻略：\r\n①6月1日当天在评价区分享童年趣事赠6元无门槛红包\r\n②下单时在订单备注处填写【六一儿童节快乐】随机赠送“回忆杀爆款玩具”，数量有限，送完即止。\r\n提前预祝大小宝宝节日开心。"
      date: (2) ["1970-01-01 08:00:00", "1970-01-01 22:30:00"]
      deliveryPrice: 4
      deliveryTime: 38
      description: "蜂鸟专送"
      id: 1
      minPrice: 20
      name: "乡村基(高新金融店)"
      pics: (4) ["http://172.16.7.254:5000/upload/shop/1590480883773.webp", "http://172.16.7.254:5000/upload/shop/1590480886706.webp", "http://172.16.7.254:5000/upload/shop/1590480889717.webp", "http://172.16.7.254:5000/upload/shop/1590482092433.webp"]
      score: 4.5
      sellCount: 100
      supports: (2) ["单人精彩套餐", "VC无限橙果汁全场8折"] */
      fileList: [], //回显照片墙
      picsList: [], //照片墙新老图片的数组
      activearr: [], //选中的活动
      activeName: "", //新添加活动名字
    };
  },

  methods: {
    //店铺头像
    handleAvatarSuccess(res, file) {
      this.newavatar = res.imgUrl;
      this.shopdata.avatar = URL.createObjectURL(file.raw);
    },

    //店铺照片墙
    picsSuccess(res) {
      // console.log(res);
      this.picsList.push(res.imgUrl);
    },

    //照片墙删除图片
    picsRemove(file) {
      console.log("删除", file);
      //根据新老图片获取对应的名字
      let pname = file.response ? file.response.imgUrl : file.name;

      //循环大数组，从中找到名字并删除
      for (let i = 0; i < this.picsList.length; i++) {
        if (this.picsList[i] == pname) {
          this.picsList.splice(i, 1);
          break;
        }
      }
    },

    //保存
    clickedit() {
      let param = {
        id: this.shopdata.id, //店铺id
        name: this.shopdata.name, //店铺名
        bulletin: this.shopdata.bulletin, //公告
        deliveryPrice: this.shopdata.deliveryPrice, //起送价格
        deliveryTime: this.shopdata.deliveryTime, //时间
        description: this.shopdata.description, //描述
        score: this.shopdata.score, //好评
        sellCount: this.shopdata.sellCount, //销量

        avatar: this.newavatar, //店铺头像
        pics: JSON.stringify(this.picsList), //店铺照片墙
        supports: JSON.stringify(this.activearr), //店铺活动
        date: JSON.stringify(this.shopdata.date), //店铺时间
      };
      console.log(param);

      shopnameedit(param).then((res) => {
        console.log(res);
        if (res.data.code == 0) {
          this.$message({
            message: "修改成功",
            type: "success",
          });
        }
      });
    },
  },

  created() {
    shopinfo().then((res) => {
      // console.log(res.data.data);
      this.shopdata = res.data.data;
      console.log(this.shopdata);
      //初始化头像名字
      this.newavatar = this.shopdata.avatar.substring(
        this.shopdata.avatar.lastIndexOf("/") + 1
      );

      this.fileList = this.shopdata.pics.map((picname) => {
        //截取图片的新名字
        let name = picname.substring(picname.lastIndexOf("/") + 1);
        //把老照片放进数组
        this.picsList.push(name);
        return {
          url: picname,
          name,
        };
      });
    });
  },
};
</script>

<style lang="less" scoped>
#store_container {
  .store_container_main {
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    .store_container_main_title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 50px;
      border-bottom: 1px solid #f4f5f9;
      padding: 0 20px;
      color: #848485;
      margin-bottom: 20px;
    }
    .store_container_main_body {
      div {
        display: flex;
        align-items: center;
        margin: 10px 0;
        span {
          width: 100px;
          text-align: right;
          margin-right: 20px;
        }
        .el-checkbox-group {
          width: 500px;
          display: flex;
          flex-wrap: wrap;
        }
      }
    }
    .dotime {
      width: 520px;
    }
  }

  .avatar-uploader,
  .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
}
</style>